<template>
    <div>
        <div class="search-container">
            <el-form ref="form" :model="form" label-width="80px">
                <div class="flex-row">
                    <el-form-item label="mod" prop="mod">
                        <el-select v-model="form.mod" placeholder="请选择">
                            <el-option v-for="item in modList" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="search">
                        <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入游戏id或者备注"
                            @select="handleSelect" value="value" style="width:350px">
                            <!-- <el-button slot="append" icon="el-icon-search" @click="handleSelect"></el-button> -->
                            <div slot-scope="scope">{{ scope.item.name }}</div>
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="open">创建玩家</el-button>
                    </el-form-item>
                </div>
            </el-form>

            <div v-if="gameId && allSkin.length" class="table-container">
                <div class="no-data" style="text-align: left;padding-left: 0;padding-top: 0;">
                    <span>当前玩家：</span>
                    <span style="margin-left: 12px; font-size: 18px;font-weight: 700;color:#333">{{ gameId }}</span>
                    <span v-if="remark" style="font-size: 12px;">（{{ remark }}）</span>
                    <el-button size="mini" type="primary" style="margin-left: 16px;" @click="openEdit">修改</el-button>
                </div>
                <div v-for="(item, index) in allSkin" :key="index" style="margin-bottom:24px">
                    <p class="title">{{ item.name }}</p>
                    <div class="container">
                        <div v-for="(jtem, index) in item.list" :key="index" class="item">
                            <div class="flex-row-center">
                                <img :src="domain + jtem.src" alt height="32" />
                            </div>
                            <p class="name">{{ jtem.name }}</p>
                            <el-button v-if="lockedSkin.includes(jtem._id)" size="mini" type="danger"
                                @click="deleteItem(jtem._id)">删除
                            </el-button>
                            <el-button v-else size="mini" @click="lockedItem(jtem._id)">解锁
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="no-data">暂无数据</div>
        </div>

        <!-- 新增cdk -->
        <el-dialog title="创建玩家" :visible.sync="dialogFormVisible">
            <el-form :model="form2" label-width="100px">
                <el-form-item label="玩家唯一id" prop="gameid">
                    <el-input v-model="form2.gameid" placeholder="请输入" style="width: 250px;"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form2.remark" type="textarea" placeholder="请输入" style="width: 250px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createPlayer">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改备注" :visible.sync="dialogFormVisible2">
            <el-form :model="form2" label-width="100px">
                <el-form-item label="备注" prop="gameid">
                    <el-input v-model="remarkInput" type="textarea" placeholder="请输入" style="width: 250px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="editRemark">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tagArr: [],
            lockedSkin: [],
            playerArr: [],
            state4: "",
            gameId: "",
            remark: "",
            remarkInput: "",
            dialogFormVisible: false,
            dialogFormVisible2: false,
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '未使用',
                    value: '1'
                },
                {
                    label: '已使用',
                    value: '2'
                },
            ],
            modList: [],
            allSkin: [],
            form: {
                mod: '',
                skin: '',
                status: '',
            },
            form2: {
                gameid: '',
                remark: '',
            },
            tableData: [],
            total: 0,
            pageSize: 10,
            pageNum: 0,
            canUseCdkList: []
        }
    },
    created() {
        this.getModList()
    },
    methods: {
        init() {
            this.gameId = ''
            this.remark = ''
            this.playerArr = []
        },
        openEdit() {
            this.dialogFormVisible2 = true
            this.remarkInput = this.remark
        },
        async editRemark() {
            let res = await this.axios.post("/account/update", {
                gameid: this.gameId,
                remark: this.remarkInput
            });
            if (res.data.code == 0) {
                this.dialogFormVisible2 = false
                this.init()
                this.$message({
                    type: "success",
                    message: "修改成功!",
                });
            } else {
                this.$message.error("修改失败");
            }
        },
        async getTag() {
            let res = await this.$store.dispatch("getTags", {
                kind: "skins",
                mid: this.form.mod,
            });
            this.tagArr = res.filter((val) => {
                return val.showType != "2";
            });
            this.getAllSkin()
        },
        open() {
            this.dialogFormVisible = true
            this.form2.gameid = this.state4
            this.form2.remark = ''
        },
        search() {
            let item = this.playerArr.filter(val => val.gameid == this.gameId)
            if (item.length) {
                this.lockedSkin = item[0].lockedSkin
                this.remark = item[0].remark
            }
        },
        handleSelect() {
            this.gameId = this.state4
            this.search(this.state4);
        },
        querySearchAsync(queryString, cb) {
            if (!queryString) {
                return;
            }
            this.axios
                .get("/account/searchPlayer", {
                    params: {
                        searchVal: this.state4
                    }
                })
                .then(res => {
                    this.playerArr = res.data
                    let result = this.creatResult(res.data);
                    cb(result);
                });
        },
        creatResult(arr = []) {
            if (arr.length === 0) {
                return [];
            }
            return arr.map(val => {
                let str = val.remark ? `(${val.remark})` : ''
                return {
                    name: `${val.gameid} ${str}`,
                    value: val.gameid
                };
            });
        },
        async createPlayer() {
            if (!this.form2.gameid) {
                return this.$message.warning("请输入唯一id");
            }
            let res = await this.axios.post("/account/createPlayer", this.form2);
            if (res.data.code == 0) {
                this.dialogFormVisible = false
                this.$message({
                    type: "success",
                    message: "创建成功!",
                });
            } else {
                this.$message.error("创建失败");
            }
        },
        async updateSkin() {
            let res = await this.axios.get("/account/locakedSkin", {
                params: {
                    id: this.gameId,
                    mid: this.form.mod
                }
            });
            this.lockedSkin = res.data.lockedSkin
        },
        deleteItem(id) {
            this.$confirm("是否删除该玩家的皮肤?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await this.axios.post("/cdk/deleteHaslocked", {
                        mid: this.form.mod,
                        gameid: this.gameId,
                        skinId: id
                    });
                    if (res.data.code == 0) {
                        this.updateSkin()
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    } else {
                        this.$message.error("删除失败");
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        lockedItem(id) {
            this.$confirm("是否解锁该皮肤?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await this.axios.post("/cdk/directLocked", {
                        gameid: this.gameId,
                        skinId: id,
                        mid: this.form.mod
                    });
                    if (res.data.code == 0) {
                        this.updateSkin()
                        this.$message({
                            type: "success",
                            message: "解锁成功!",
                        });
                    } else {
                        this.$message.error("解锁失败");
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消解锁",
                    });
                });
        },
        async getModList() {
            let res = await this.axios("/mods", {
                params: {
                    version: this.$store.state.version,
                },
            });
            this.modList = res.data;
            this.form.mod = res.data[0]._id
            this.getTag()
        },
        async getAllSkin() {
            let res = await this.axios("/modskin/allSkin", {
                params: {
                    mid: this.form.mod,
                },
            });
            for (let val of this.tagArr) {
                let temp = res.data.filter(value => {
                    return value.tag.includes(val._id)
                })
                temp = temp
                    .map(value => {
                        let flag = 999
                        if (value.sort && value.sort.length) {
                            let t = value.sort.filter(o => o.tagId == val._id)
                            if (t.length) {
                                flag = t[0].value
                            }
                        }
                        return {
                            ...value,
                            sortFlag: flag
                        }
                    })
                    .sort((a, b) => {
                        return a.sortFlag - b.sortFlag
                    })
                this.allSkin.push({
                    list: temp,
                    name: val.name
                })
            }
        }
    }
}
</script>
<style>
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 16px 0 16px;
}

.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 8px;
}

.table-container {
    padding: 0 16px 16px 16px;
}

.flex-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 16px;
}

.no-data {
    padding: 24px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 16px 0 16px;
    width: 100%;
}

.item {
    display: flex;
    flex-flow: column;
    margin-top: 12px;
    margin-right: 12px;
    padding: 16px;
    width: 80px;
    background-color: #f4f4f4;
    border-radius: 6px;
}

.item:hover {
    background-color: #d6d6d6;
}

.title {
    font-size: 18px;
    margin-bottom: 6px;
    color: #333;
    font-weight: 700;
}

.name {
    color: #666;
    font-size: 12px;
    text-align: center;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
}
</style>